<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- 引入高德地图 -->
		<script src="https://webapi.amap.com/maps?v=2.0&key=b375b100d34937c068ddcbdd205ae373"></script>
	</head>
	<body>
		<main class="rel">
			<p>Outside</p>
			<div class="dpflex" id="top">
				<h1>Sporting</h1>
				<p>
					<span class="iconfont icon-music"></span>
					<span class="iconfont icon-dispose"></span>
				</p>
			</div>
			<div id="distance"><span class="caiyun" id="meter">0</span> M</div>
			<p id="map" class="dpflex">
				<span> Weak signal of GPS</span><span>-----------------</span>
				<span class="iconfont icon-map2"></span>
			</p>
			<div id="something" class="dpflex">
				<p>
					<span class="iconfont icon-usetimen bigger"></span><span>Speed</span>
					<span class="big caiyun" id="speed">-----</span>
				</p>
				<div>
					<span class="iconfont icon-time bigger"></span><span>Time</span>
					<p class="big caiyun" id="clock">
						<span id="hours">00</span> :<span id="minutes">00</span>:
						<span id="seconds">00</span>
					</p>
				</div>
				<p>
					<span class="iconfont icon-kcal bigger"></span><span>Kcal</span>
					<span class="big caiyun" id="kcal">200</span>
				</p>
			</div>

			<div id="pause" class="abs">
				<span class="iconfont icon-pausen"></span>
				<span class="caiyun">Pause</span>
			</div>
			<div id="continue" class="abs">
				<p class="dpflex">
					<span class="iconfont icon-continue2"></span>
					<span class="iconfont icon-over"></span>
				</p>
			</div>
		</main>
	</body>
</html>
